<template>
  <view class="page page-grey page-coupon-statistic">
    <view class="page-content">
      <view class="page-statistic">
        <view class="page-statistic-image"></view>
        <view class="statistic-header-name"><fui-text text="支付金额(元)" size="28" color="#fff"></fui-text></view>
        <view class="statistic-header-value"><fui-text :text="utils.moneyFormatter(todayData.paymentAmount)" size="56" color="#fff" fontWeight="bold"></fui-text></view>
        <view class="statistic-content-list">
          <view class="statistic-content-item">
            <view class="statistic-item-name"><fui-text text="发放张数(张)" size="24" color="#E6E6E6"></fui-text></view>
            <view class="statistic-item-value"><fui-text :text="todayData.grantNumber" size="36" color="#fff" fontWeight="bold"></fui-text></view>
          </view>
          <view class="statistic-content-item">
            <view class="statistic-item-name"><fui-text text="使用张数(张)" size="24" color="#E6E6E6"></fui-text></view>
            <view class="statistic-item-value"><fui-text :text="todayData.useNumber" size="36" color="#fff" fontWeight="bold"></fui-text></view>
          </view>
          <view class="statistic-content-item">
            <view class="statistic-item-name"><fui-text text="支付采购方数" size="24" color="#E6E6E6"></fui-text></view>
            <view class="statistic-item-value"><fui-text :text="todayData.buyerNumber" size="36" color="#fff" fontWeight="bold"></fui-text></view>
          </view>
        </view>
      </view>
      <view class="coupon-panel">
        <view class="coupon-panel-header">
          <fui-text text="数据统计" size="32" color="#333" fontWeight="bold"></fui-text>
          <view class="coupon-panel-tabs">
            <view class="coupon-panel-tab" :class="{'active': item.value === currentTab}" v-for="item in tabs" :key="item.value" @click="handleChangeTab(item.value)">{{ item.text }}</view>
          </view>
        </view>
        <view class="coupon-panel-content coupon-data-list">
          <view class="coupon-data-item flex100">
            <view class="coupon-data-name"><fui-text text="支付金额" size="24" color="#999"></fui-text></view>
            <view class="coupon-data-value"><fui-text :text="utils.moneyFormatter(statisticData.paymentAmount)" :padding="[0, '5rpx']" size="56" color="var(--fui-color-primary)" fontWeight="bold"></fui-text><fui-text text="元" :padding="[0, '5rpx']" size="24" color="#999"></fui-text></view>
          </view>
          <view class="coupon-data-item">
            <view class="coupon-data-name"><fui-text text="发券张数" size="24" color="#999"></fui-text></view>
            <view class="coupon-data-value"><fui-text :text="statisticData.grantNumber" size="56" color="#333" fontWeight="bold"></fui-text></view>
          </view>
          <view class="coupon-data-item">
            <view class="coupon-data-name"><fui-text text="使用张数" size="24" color="#999"></fui-text></view>
            <view class="coupon-data-value"><fui-text :text="statisticData.useNumber" size="56" color="#333" fontWeight="bold"></fui-text></view>
          </view>
          <view class="coupon-data-item">
            <view class="coupon-data-name"><fui-text text="支付采购方数" size="24" color="#999"></fui-text></view>
            <view class="coupon-data-value"><fui-text :text="statisticData.buyerNumber" size="56" color="#333" fontWeight="bold"></fui-text></view>
          </view>
        </view>
      </view>
      <view class="coupon-panel" v-if="currentTab !== 1">
        <view class="coupon-panel-header">
          <fui-text text="领取优惠券统计" size="32" color="#333" fontWeight="bold"></fui-text>
        </view>
        <view class="coupon-panel-content coupon-statistic-chart">
          <page-chart :xAxisData="xAxisData" :seriesData="seriesData" :showLegend="false"></page-chart>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { useStore } from 'vuex'
import utils from '@/components/firstui/fui-utils'
import pageChart from '@/components/chart'
import couponApi from '@/api/coupon'

const store = useStore()
const tab = inject('$tab')
const modal = inject('$modal')

const couponId = ref('')
onLoad(option => {
  couponId.value = option.couponId
  getTodayStatisticData()
  getStatisticData()
  getCouponGrantData()
})

// 数据统计标签
const currentTab = ref(1)
const tabs = [
  { text: '昨日', value: 1 },
  { text: '7日', value: 7 },
  { text: '一月', value: 30 },
]
const handleChangeTab = (tab) => {
  currentTab.value = tab
  getStatisticData()
  getCouponGrantData()
}

// 统计图表数据
const xAxisData = computed(() => couponGrantData.value.map(item => utils.dateFormatter(item.date, 'm.d')))
const seriesData = computed(() => {
  return [{
    name: '优惠券领取数量',
    linearGradient: true,
    yAxisData: couponGrantData.value.map(item => item.grantNumber)
  }]
})

// 优惠券发放数据
const couponGrantData = ref([])
const getCouponGrantData = () => {
  if (currentTab.value === 1) return
  try {
    const params = {
      id: couponId.value,
      period: currentTab.value
    }
    couponApi.getCouponGrantData(params).then(res => {
      if (res.code === 0) {
        couponGrantData.value = res.data || []
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err){
    modal.msgError(err)
  }
}

// 获取当日统计数据
const todayData = ref({})
const getTodayStatisticData = () => {
  modal.loading('加载中...')
  try {
    couponApi.getStatisticData({
      couponType: store.getters.userType == 1 ? 51 : 52,
      queryType: 42,
      id: couponId.value,
      period: 0
    }).then(res => {
      modal.closeLoading()
      if (res.code === 0) {
        todayData.value = res.data || {}
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err){
    modal.closeLoading()
    modal.msgError(err)
  }
}

// 获取历史统计数据
const statisticData = ref({})
const getStatisticData = () => {
  try {
    couponApi.getStatisticData({
      couponType: store.getters.userType == 1 ? 51 : 52,
      queryType: 42,
      id: couponId.value,
      period: currentTab.value
    }).then(res => {
      if (res.code === 0) {
        statisticData.value = res.data || {}
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch(err){
    modal.msgError(err)
  }
}
</script>

<style lang="scss" scoped>
.page-coupon-statistic {
  .page-content {
    padding: 36rpx;
  }
  .coupon-panel {
    .coupon-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30rpx 0;
      .coupon-panel-tabs {
        display: flex;
        .coupon-panel-tab {
          margin-left: 30rpx;
          font-size: 24rpx;
          color: #999;
          &.active {
            font-weight: bold;
            color: var(--fui-color-primary);
          }
        }
      }
    }
    .coupon-panel-content {
      &.coupon-data-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin: -10rpx;
        .coupon-data-item {
          flex: 0 0 calc(33.3333% - 20rpx);
          border-radius: 8rpx;
          box-sizing: border-box;
          background-color: #fff;
          margin: 10rpx;
          padding: 20rpx;
          &.flex100 {
            flex: 0 0 calc(100% - 20rpx);
          }
          .coupon-data-name {
            margin-bottom: 8rpx;
          }
          .coupon-data-value {
            text-align: center;
          }
        }
      }
      &.coupon-statistic-chart {
        height: 500rpx;
        border-radius: 20rpx;
        box-sizing: border-box;
        background-color: #fff;
        padding: 24rpx;
      }
    }
  }
  .page-statistic {
    width: 100%;
    overflow: hidden;
    background: var(--fui-color-primary);
    padding: 36rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    .page-statistic-image {
      position: absolute;
      z-index: 0;
      top: 0;
      right: 0;
      width: 180rpx;
      height: 180rpx;
      border: 60rpx solid #fff;
      border-radius: 50%;
      margin: -100rpx;
      opacity: .3;
    }
    .statistic-header-value {
      margin-bottom: 28rpx;
      text-align: center;
    }
    .statistic-content-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .statistic-content-item {
        text-align: center;
        .statistic-item-name {
          margin-bottom: 8rpx;
        }
      }
    }
  }
}
</style>